import React, { Component } from "react";
import {
  LocaleProvider,
  Icon,
  Button,
  Form,
  InputNumber,
  Input,
  DatePicker,
  Select,
  Row,
  Col,
  Table,
  Tag,
  Drawer
} from "antd";
import { observable, action } from "mobx";
import { observer } from "mobx-react";
import zh_CN from "antd/lib/locale-provider/zh_CN";
import SumMoney from "../../../components/SumOfMoney";
import EyeCard from "../../../components/EyeCard";
import RemoveMoney from "../../../components/RemoveMoney";
import Supplement from "../../../components/Supplement";
import Postpone from "../../../components/Postpone";
import Record from "../../../components/Record";
import { orderService } from "../../../service/order";
import OrderStore from '../../../store/Order'

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Column } = Table;


@observer
class All extends Component {

  store = null;

  @observable data = [];
  @observable orderData = [];
  @observable selectedRowKeys = [];
  @observable visible = false;
  @observable childrenDrawer = false;
  @observable supplementDrawer = false;
  @observable postponeDrawer = false;
  @observable recordDrawer = false;

  pagination = {
    total: this.orderData.length,
    className: "pagination-position",
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: total => {
      return `共 ${total} 条`;
    }
  };

  @action load = async() => {
    this.store = new OrderStore();
    const resp = await orderService.order_list();
    this.updateStore(resp.data.rows)
  }
  @action updateStore = data => {
    data.map(item => {
      this.store.orderlist = [{
          key: item.id,
          name: item.name,
          phone: item.tel,
          loanCount: item.nums,
          loanState: item.state === 0 ? ["待放款"] : [""],
          loanMoney: item.money,
          payAmount: "-",
          serveMoney: item.smoney,
          loanInterest: item.amoney,
          loanDate: item.ctime,
          repaymentDate: item.outtime ? item.outtime : "-",
          partRepay: "-",
          ActualRepaymentDate: item.rtime ? item.rtime : "-",
          RepaymentCount: item.rmoney,
          newLoanDate: item.ectime ? item.ectime : "-",
          newRepaymentDate: item.eouttime ? item.eouttime : "-",
          poundage: item.eamoney ? item.eamoney : "-",
          charge: item.esmoney ? item.esmoney : "-",
          OverdueDays: "-",
          CollectionStatus: item.pstate === 0 ? ["未催收"] : [""],
          Collectter: item.puid ? item.puid : "-",
          CollectionRepayment: item.pmoney,
          auditor: "于宇",
          MOcommissioner: "-",
          cz: ["销账", "补扣"]
      },...this.store.orderlist]
    });
  }

  componentWillMount() {
    this.load();
  }


  initData = () => {
    // this.orderData = [];
  };

  @action
  showDrawer = () => {
    this.visible = true;
  };

  @action
  showChildrenDrawer = () => {
    this.childrenDrawer = true;
  };

  @action
  showSupplementDrawer = () => {
    this.supplementDrawer = true;
  };

  @action
  showPostponeDrawer = () => {
    this.postponeDrawer = true;
  };

  @action
  showRecordDrawer = () => {
    this.recordDrawer = true;
  };

  @action
  onClose = () => {
    this.visible = false;
    this.childrenDrawer = false;
    this.supplementDrawer = false;
    this.postponeDrawer = false;
    this.recordDrawer = false;
  };

  @action
  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.selectedRowKeys = selectedRowKeys;
  };

  handleSubmit = e => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue["range-picker"];
      const values = {
        ...fieldsValue,
        "range-picker": [
          rangeValue[0].format("YYYY-MM-DD"),
          rangeValue[1].format("YYYY-MM-DD")
        ]
      };
      console.log("Received values of form: ", values);
      console.log(1);
    });
  };

  handleSearch = () => {
    console.log(1);
  };

  setRowClassName = (record, index) => {
    return index % 2 === 0 ? "row-white" : "row-grey";
  };

  // componentDidMount() {
  //   this.getData();
  // }

  // componentWillUnmount() {
  //   this.initData();
  // }

  render() {
    const rowSelection = {
      selectedRowKeys: this.selectedRowKeys,
      onChange: this.onSelectChange
    };
    const { getFieldDecorator } = this.props.form;
    const rangeConfig = {
      rules: [{ type: "array", required: true, message: "Please select time!" }]
    };

    const { orderlist } = this.store
    console.log(orderlist)
    return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">全部订单</span>
              <div className="btn">
                <Button icon="redo" size="small">
                  刷新
                </Button>
                <Button icon="delete" size="small" onClick={this.handleDelete}>
                  清空
                </Button>
                <Button
                  icon="search"
                  size="small"
                  type="primary"
                  onClick={this.handleSearch}
                >
                  搜索
                </Button>
              </div>
              <div className="btn">
                <Tag color="blue" key={1}>
                  批量加MO
                </Tag>
                <Tag color="orange" key={2}>
                  批量改审核
                </Tag>
                <Tag color="red" key={3}>
                  批量加催收
                </Tag>
              </div>
            </div>
          </div>
          <div className="line" />
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("phone", {
                      rules: [
                        { required: true, message: "Please input your phone!" }
                      ]
                    })(
                      <Input
                        placeholder="手机号"
                        style={{ color: "rgba(0,0,0,.25)", width: "190px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("name", {
                      rules: [
                        { required: true, message: "Please input your name!" }
                      ]
                    })(
                      <Input
                        placeholder="姓名"
                        style={{ color: "rgba(0,0,0,.25)", width: "190px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("loanState", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your loanState!"
                        }
                      ]
                    })(
                      <Select
                        placeholder="借款状态"
                        style={{ color: "rgba(0,0,0,.25)", width: "190px" }}
                      >
                        <Select.Option value="waitMachine">
                          待放款
                        </Select.Option>
                        <Select.Option value="machineQuerying">
                          放款中
                        </Select.Option>
                        <Select.Option value="waitPeople">
                          放款失败
                        </Select.Option>
                        <Select.Option value="peopleQuerying">
                          待还款
                        </Select.Option>
                        <Select.Option value="queried">已还款</Select.Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("minLoan", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your minLoan!"
                        }
                      ]
                    })(
                      <InputNumber
                        placeholder="最小借款次数"
                        min={0}
                        style={{ color: "rgba(0,0,0,.25)", width: "190px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("maxLoan", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your maxLoan!"
                        }
                      ]
                    })(
                      <InputNumber
                        placeholder="最大借款次数"
                        min={0}
                        style={{ color: "rgba(0,0,0,.25)", width: "190px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("minPostpone", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your minPostpone!"
                        }
                      ]
                    })(
                      <InputNumber
                        placeholder="最小展期次数"
                        min={0}
                        style={{ color: "rgba(0,0,0,.25)", width: "190px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={2}>
                  <FormItem>
                    {getFieldDecorator("maxPostpone", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your maxPostpone!"
                        }
                      ]
                    })(
                      <InputNumber
                        placeholder="最大展期次数"
                        min={0}
                        style={{ color: "rgba(0,0,0,.25)", width: "125px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator("range-picker", rangeConfig)(
                      <RangePicker
                        format="YYYY/MM/DD"
                        style={{ color: "rgba(0,0,0,.25)", width: "270px" }}
                      />
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator("sq-picker", rangeConfig)(
                      <RangePicker
                        style={{ color: "rgba(0,0,0,.25)", width: "260px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator("sq-picker", rangeConfig)(
                      <RangePicker
                        style={{ color: "rgba(0,0,0,.25)", width: "260px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator("sq-picker", rangeConfig)(
                      <RangePicker
                        style={{ color: "rgba(0,0,0,.25)", width: "260px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator("sq-picker", rangeConfig)(
                      <RangePicker
                        style={{ color: "rgba(0,0,0,.25)", width: "260px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("minDays", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your minDays!"
                        }
                      ]
                    })(
                      <InputNumber
                        placeholder="最小逾期天数"
                        min={0}
                        style={{ color: "rgba(0,0,0,.25)", width: "195px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={2}>
                  <FormItem>
                    {getFieldDecorator("maxDays", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your maxDays!"
                        }
                      ]
                    })(
                      <InputNumber
                        placeholder="最大逾期天数"
                        min={0}
                        style={{ color: "rgba(0,0,0,.25)", width: "125px" }}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("auditor", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your auditor!"
                        }
                      ]
                    })(
                      <Select
                        placeholder="审核专员"
                        style={{ color: "rgba(0,0,0,.25)", width: "203px" }}
                      >
                        <Select.Option value="lq">李强</Select.Option>
                        <Select.Option value="wm">王梅</Select.Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("MOcommissioner", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your MOcommissioner!"
                        }
                      ]
                    })(
                      <Select
                        placeholder="MO专员"
                        style={{ color: "rgba(0,0,0,.25)", width: "190px" }}
                      >
                        <Select.Option value="yh">尹浩</Select.Option>
                        <Select.Option value="xj">徐静</Select.Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col span={2}>
                  <FormItem>
                    {getFieldDecorator("CollectionStatus", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your CollectionStatus!"
                        }
                      ]
                    })(
                      <Select
                        placeholder="催收状态"
                        style={{ color: "rgba(0,0,0,.25)", width: "125px" }}
                      >
                        <Select.Option value="collection">交催收</Select.Option>
                        <Select.Option value="inCollection">
                          催收中
                        </Select.Option>
                        <Select.Option value="collected">
                          催收完成
                        </Select.Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator("Collectter", {
                      rules: [
                        {
                          required: true,
                          message: "Please input your Collectter!"
                        }
                      ]
                    })(
                      <Select
                        placeholder="催收人"
                        style={{ color: "rgba(0,0,0,.25)", width: "193px" }}
                      >
                        <Select.Option value="yh">尹浩</Select.Option>
                        <Select.Option value="xj">徐静</Select.Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table
              size="small"
              className="loan-table"
              rowClassName={this.setRowClassName}
              pagination={this.pagination}
              rowSelection={rowSelection}
              bordered
              scroll={{ x: 2400 }}
              dataSource={orderlist}
            >
              <Column
                title="姓名"
                align="center"
                dataIndex="name"
                width="130px"
                fixed="left"
              />
              <Column
                title="手机号"
                align="center"
                dataIndex="phone"
                width="115"
              />
              <Column
                title="借款次数"
                align="center"
                dataIndex="loanCount"
                width="100"
              />
              <Column
                title="借款状态"
                align="center"
                dataIndex="loanState"
                width="100"
                render={loanState => (
                  <span>
                    <Tag color="orange" key={loanState}>
                      {loanState}
                    </Tag>
                  </span>
                )}
              />
              <Column
                title="借款额"
                align="center"
                dataIndex="loanMoney"
                width="100"
              />
              <Column
                title="还款额"
                align="center"
                dataIndex="payAmount"
                width="100"
              />
              <Column
                title="服务费"
                align="center"
                dataIndex="serveMoney"
                width="100"
              />
              <Column
                title="借款利息"
                align="center"
                dataIndex="loanInterest"
                width="100"
              />
              <Column
                title="借款日期"
                align="center"
                dataIndex="loanDate"
                width="100"
              />
              <Column
                title="还款日期"
                align="center"
                dataIndex="repaymentDate"
                width="100"
              />
              <Column
                title="部分还款"
                align="center"
                dataIndex="partRepay"
                width="100"
              />
              <Column
                title="实际还款日"
                align="center"
                dataIndex="ActualRepaymentDate"
                width="100"
              />
              <Column
                title="还款金额"
                align="center"
                dataIndex="RepaymentCount"
                width="100"
              />
              <Column
                title="新借款日"
                align="center"
                dataIndex="newLoanDate"
                width="100"
              />
              <Column
                title="新还款日"
                align="center"
                dataIndex="newRepaymentDate"
                width="100"
              />
              <Column
                title="展期手续费"
                align="center"
                dataIndex="poundage"
                width="100"
              />
              <Column
                title="展期服务费"
                align="center"
                dataIndex="charge"
                width="100"
              />
              <Column
                title="逾期天数"
                align="center"
                dataIndex="OverdueDays"
                width="100"
              />
              <Column
                title="催收状态"
                align="center"
                dataIndex="CollectionStatus"
                width="100"
                render={CollectionStatus => (
                  <span>
                    <Tag color="orange" key={CollectionStatus}>
                      {CollectionStatus}
                    </Tag>
                  </span>
                )}
              />
              <Column
                title="催收人"
                align="center"
                dataIndex="Collectter"
                width="100"
              />
              <Column
                title="催收还款"
                align="center"
                dataIndex="CollectionRepayment"
                width="100"
              />
              <Column
                title="审核专员"
                align="center"
                dataIndex="auditor"
                width="100"
              />
              <Column
                title="MO专员"
                align="center"
                dataIndex="MOcommissioner"
                width="100"
              />
              <Column
                title="操作"
                align="center"
                dataIndex="cz"
                width="300px"
                fixed="right"
                render={cz => (
                  <span>
                    <Tag color="blue" key={cz} onClick={this.showDrawer}>
                      <Icon type="eye" />
                    </Tag>
                    <Tag
                      color="orange"
                      key="xz"
                      onClick={this.showChildrenDrawer}
                    >
                      销账
                    </Tag>
                    <Tag
                      color="orange"
                      key="bk"
                      onClick={this.showSupplementDrawer}
                    >
                      补扣
                    </Tag>
                    <Tag
                      color="blue"
                      key="zq"
                      onClick={this.showPostponeDrawer}
                    >
                      展期
                    </Tag>
                    <Tag color="blue" key="jl" onClick={this.showRecordDrawer}>
                      记录
                    </Tag>
                    <Tag color="green" key="zl">
                      资料
                    </Tag>
                  </span>
                )}
              />
            </Table>
          </div>
          <SumMoney />
          <Drawer
            title="订单详情"
            placement="right"
            width="75%"
            onClose={this.onClose}
            visible={this.visible}
          >
            <EyeCard />
          </Drawer>
          <Drawer
            title="销账"
            placement="right"
            width="30%"
            onClose={this.onClose}
            visible={this.childrenDrawer}
          >
            <RemoveMoney />
          </Drawer>
          <Drawer
            title="补扣"
            placement="right"
            width="30%"
            onClose={this.onClose}
            visible={this.supplementDrawer}
          >
            <Supplement />
          </Drawer>
          <Drawer
            title="展期"
            placement="right"
            width="40%"
            onClose={this.onClose}
            visible={this.postponeDrawer}
          >
            <Postpone />
          </Drawer>
          <Drawer
            title="记录"
            placement="right"
            width="50%"
            onClose={this.onClose}
            visible={this.recordDrawer}
          >
            <Record />
          </Drawer>
        </div>
      </LocaleProvider>
    );
  }
}

const ordersForm = Form.create()(All);

export default ordersForm;
